<template>
  <div>
    <div class="home-search">
      <van-search
        v-model="value"
        shape="round"
        background="#1296db"
        input-align="center"
        placeholder="请输入搜医院/医生/症状名称"
      />
    </div>
    <div style="height:64px"></div>
    <div class="home-content">
      <div class="content-top">
        <div class="content-top-item"  @click="registrationClick">
          <div class="content-top-icon">
            <van-icon name="phone-o" size="40px" color="#1296db" />
          </div>
          <div class="content-top-title">
            <span>预约挂号</span>
          </div>
        </div>
        <div class="content-top-item">
          <van-icon class="content-top-icon" name="comment-o" size="40px" color="#1296db" />
          <span class="content-top-title">在线问诊</span>
        </div>
        <div class="content-top-item">
          <van-icon class="content-top-icon" name="after-sale" size="40px" color="#1296db" />
          <span class="content-top-title">云购药物</span>
        </div>
        <div class="content-top-item">
          <van-icon class="content-top-icon" name="friends-o" size="40px" color="#1296db" />
          <span class="content-top-title">候诊排号</span>
        </div>
        <div class="content-top-item">
          <van-icon class="content-top-icon" name="todo-list-o" size="40px" color="#1296db" />
          <span class="content-top-title">我的挂号单</span>
        </div>
        <div class="content-top-item">
          <van-icon class="content-top-icon" name="records" size="40px" color="#1296db" />
          <span class="content-top-title">我的病历</span>
        </div>
      </div>
      <div class="type-header-title">
        <span>热门科室</span>
      </div>

      <div class="hot-type">
        <HotItem v-for="item in hottype" :key="item.code" :item="item"></HotItem>
      </div>
      <div class="type-header-title">
        <span>最新资讯</span>
      </div>
      <div>
        <NewItem v-for="item in news" :key="item.url" :itemcontent="item"></NewItem>
      </div>
    </div>
  </div>
</template>
<script>
import HotItem from "./component/HotItem";
import NewItem from "./component/NewItem";
export default {
  name: "Home",
  components: {
    HotItem,
    NewItem
  },
  methods:{
    registrationClick(){
      this.$router.push('/registration')
    }
  },
  data() {
    return {
      value: "",
      news: [
        {
          url: "1111",
          title: "张家口最新疫情问题汇总"
        },
        {
          url: "222",
          title:
            "张家口最新医疗问题汇总，新项目陆续进行更新，得到政府的大力支持。"
        },
        {
          url: "333",
          title:
            "疫情面前人人平等你，我们应该遵守医院的规则，以避免疫情的传播。"
        }
      ],
      hottype: [
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-icon'></use></svg>",
          title: "整形美容"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-yundongguke'></use></svg>",
          title: "骨科"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-shengzhizhongxin'></use></svg>",
          title: "辅助生殖"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-zhongyike'></use></svg>",
          title: "中医"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-miniaoke'></use></svg>",
          title: "泌尿外科"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-nanke'></use></svg>",
          title: "男科"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-icon1'></use></svg>",
          title: "耳鼻喉科"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-erke'></use></svg>",
          title: "儿童保健"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-2'></use></svg>",
          title: "呼吸内科"
        },
        {
          code:
            "<svg class='icon' aria-hidden='true'><use xlink:href='#icon-fuke'></use></svg>",
          title: "妇科"
        }
      ]
    };
  }
};
</script>

<style scoped>
.home-content {
  overflow: hidden;
}
.home-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 1;
}
.content-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.content-top-item {
  /* flex: 1; */
  /* height: 100%; */
  width: 25%;
  height: 100px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
  background: #f2f2f2;
}
.content-top-icon {
  margin-top: 5px;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.content-top-title {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #333333;
  font-size: 14px;
}

.hot-type {
  display: flex;
  /* justify-content: space-around;
    align-items: center; */
  flex-wrap: wrap;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
.type-header-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin-left: 15px;
  height: 40px;
}
</style>